<template>
  <div class="execution">
    <basic-container>
      <div class="info-row">
        <div class="info-body">
          <div class="info-header">
            <h4>商品信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label>商品ID:</label>
                <span>{{ ProductDetailList.id }}</span>
                <label style="min-width: 10em">商品名称:</label>
                <span>{{ ProductDetailList.title }}</span>
                <label style="min-width: 10em">副标题:</label>
                <span>{{ ProductDetailList.subtitle }}</span>
              </li>
              <li class="info-desc-item">
                <label>分类</label>
                <span
                  >{{ ProductDetailList.oneSort }}/{{
                    ProductDetailList.twoSort
                  }}</span
                >
                <label style="min-width: 10em">运费模板</label>
                <span>{{ ProductDetailList.freightName }}</span>
                <label style="min-width: 10em">商品销量</label>
                <span>{{ ProductDetailList.sales }}</span>
              </li>
              <li class="info-desc-item">
                <label>商品品牌</label>
                <span>{{ ProductDetailList.brandName }}</span>
                <label style="min-width: 10em">商品价格</label>
                <span>{{ ProductDetailList.price }}￥</span>
                <label style="min-width: 10em">税费</label>
                <span>{{ ProductDetailList.taxation }}￥</span>
              </li>
              <li class="info-desc-item">
                <label>商品主图:</label>
                <img :src="ProductDetailList.pic" class="imgIcon" />
                <label style="min-width: 10em">商品视频:</label>
                <video :src="ProductDetailList.video" class="imgIcon" />
              </li>
              <li class="info-desc-item">
                <label>商品Banner:</label>
                <img
                  v-for="(item, index) in banners"
                  :key="index"
                  :src="item"
                  class="imgIcon"
                />
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>服务说明（标签）</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label style="min-width: 10em">{{
                  ProductDetailList.labelOne
                }}</label>
                <label style="min-width: 10em">{{
                  ProductDetailList.labelTwo
                }}</label>
                <label style="min-width: 10em">{{
                  ProductDetailList.labelThree
                }}</label>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>tab页标签（可选项）</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list" v-if="ProductDetailList.productTab">
              <li class="info-desc-item">
                <label>标签名字:</label>
                <span>{{ ProductDetailList.productTab.name }}</span>
              </li>
              <li class="info-desc-item">
                <label>图片:</label>
                <img :src="ProductDetailList.productTab.pic" class="imgIcon" />
                <label>视频:</label>
                <video
                  :src="ProductDetailList.productTab.video"
                  class="imgIcon"
                />
              </li>
              <li class="info-desc-item">
                <label>文字说明:</label>
                <span>{{ ProductDetailList.productTab.text }}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>商品规格</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <el-table
                  style="width: 80%"
                  border
                  :data="ProductDetailList.skuList"
                  :header-cell-style="{
                    color: '#4D4D4D',
                    background: '#F1F2F7',
                  }"
                >
                  <el-table-column label="规格" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.sku }}
                    </template>
                  </el-table-column>
                  <el-table-column label="销售价" align="center">
                    <template slot-scope="scope">
                      ￥{{ scope.row.price }}
                    </template>
                  </el-table-column>
                  <el-table-column label="重量" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.weight }}
                    </template>
                  </el-table-column>
                  <el-table-column label="库存" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.stock }}
                    </template>
                  </el-table-column>
                  <el-table-column label="商品预警值" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.stockValue }}
                    </template>
                  </el-table-column>

                  <el-table-column label="SKU预览图" align="center">
                    <template slot-scope="scope">
                      <img
                        :src="scope.row.skuPic"
                        style="width: 50px; height: 50px"
                      />
                    </template>
                  </el-table-column>

                  <el-table-column label="销量" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.sales }}
                    </template>
                  </el-table-column>
                </el-table>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>商品其他信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label>编辑人:</label>
                <span>{{ ProductDetailList.editName }}</span>
              </li>
              <li class="info-desc-item">
                <label>审核人:</label>
                <span>{{ ProductDetailList.examineName }}</span>
              </li>
              <li class="info-desc-item">
                <label>商品状态:</label>
                <span v-if="ProductDetailList.status === 1">已上架</span>
                <span v-if="ProductDetailList.status === 2">已下架</span>
                <span v-if="ProductDetailList.status === 3">待审核</span>
                <span v-if="ProductDetailList.status === 4">已驳回</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>商品详情</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <span
                  ><div
                    class="TinymceIamge"
                    v-html="ProductDetailList.details"
                  ></div>
                </span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body" v-if="type != 'see'">
          <div class="info-header">
            <h4>审核信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <el-input
                  style="width: 85%; padding-left: 6%"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-button" v-if="type != 'see'">
          <el-button
            type="info"
            plain
            v-if="type == 'examine'"
            @click="handleNo"
            >不通过</el-button
          >
          <el-button
            type="primary"
            v-if="type == 'examine'"
            plain
            @click="handleAdopt"
            >通过</el-button
          >

          <el-button
            type="info"
            v-if="type == 'shelf'"
            plain
            @click="handleShelf"
            >下架</el-button
          >
        </div>
      </div>
    </basic-container>
  </div>
</template>
<script>
import {
  productDetails,
  adoptProduct,
  noAdoptProduct,
  operateOffProduct,
} from "@/api/pms/index";

export default {
  props: {
    type: {
      type: String,
    },
  },
  data() {
    return {
      ProductDetailList: {},
      banners: [],
      textarea: null,
    };
  },
  created() {
    this.getProductDetail();
  },
  methods: {
    getProductDetail() {
      let param = {
        productId: this.$route.query.productId,
      };
      productDetails(param).then((res) => {
        this.ProductDetailList = res.data.data;

        if (this.ProductDetailList.banner) {
          let albumPics = this.ProductDetailList.banner.split(",");
          for (let i = 0; i < albumPics.length; i++) {
            this.banners.push(albumPics[i]);
          }
        }
      });
    },
    handleAdopt() {
      let param = {
        productId: this.$route.query.productId,
      };
      adoptProduct(param).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000,
          });
          this.$router.go(-1);
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg,
            duration: 1000,
          });
        }
      });
    },
    handleNo() {
      if (!this.textarea) {
        this.$message.warning("请填写不通过原因！");
        return;
      }

      let params = {
        productId: this.$route.query.productId,
        message: this.textarea,
      };

      noAdoptProduct(params).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000,
          });
          this.$router.go(-1);
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg,
            duration: 1000,
          });
        }
      });
    },
    handleShelf() {
      this.$confirm("是否要进行下架操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (!this.textarea) {
          this.$message.warning("请填写不通过原因！");
          return;
        }

        let params = {
          productId: this.$route.query.productId,
          message: this.textarea,
        };
        operateOffProduct(params).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000,
            });
            this.$router.go(-1);
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg,
              duration: 1000,
            });
          }
        });
      });
    },
  },
};
</script>
<style scoped>
.info-row {
  padding: 20px;
  border: 1px solid #f1f2f7;
}
.el-table {
  max-width: 80% !important;
}
</style>
